<template>
  <section>
    <img
      src="../../../public/下载.png"
      alt=""
      style="width: 185px; height: 66px;margin-top:10px;"
    />
    <el-form
      :model="form"
      ref="form"
      label-width="100px"
      class="demo-form"
    >
      <el-form-item>
        <el-input v-model="form.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item v-if="!isLogin">
        <el-input v-model="form.fullname" placeholder="全名"></el-input>
      </el-form-item>
      <el-form-item v-if="!isLogin">
        <el-input v-model="form.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          type="password"
          v-model="form.password"
          placeholder="密码"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-button style="width:100%;" type="primary" @click="loginOrSign">{{
      isLogin ? "登录" : "注册"
    }}</el-button>
    <p>
      用户账户？<span style="color:blue;cursor:pointer" @click="isLogin = !isLogin">{{
        !isLogin ? "登录" : "注册"
      }}</span>
    </p>
    <tip :title="title" :isWarning="isWarning" :isShow.sync="isShow"></tip>
  </section>
</template>
<script>
import { login, signup } from '@/api/login'
import tip from '@/components/tip.vue'
export default {
  components: {
    tip
  },
  data () {
    return {
      isLogin: true,
      form: {
        email: '742351109@qq.com',
        fullname: '李谦',
        username: 'liqian',
        password: 'liqian'
      },
      title: '',
      isWarning: false,
      isShow: false
    }
  },
  methods: {
    validate () {
      if (!arguments[1]) {
        console.log(arguments[2])
        this.$refs.form.clearValidate()
        return false
      }
    },
    testForm () {
      // 邮箱
      const regExp =
        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      if (this.form.email.length === 0) {
        return {
          type: false,
          msg: '请输入邮箱'
        }
      } else if (!regExp.test(this.form.email)) {
        return {
          type: false,
          msg: '邮箱格式错误'
        }
      } else {
        if (!this.isLogin) {
          // 全名
          if (this.form.fullname.length === 0) {
            return {
              type: false,
              msg: '请输入全名'
            }
          } else {
            if (this.form.username.length === 0) {
              return {
                type: false,
                msg: '请输入用户名'
              }
            }
          }
        }
        const regExp1 = /^\S*(?=\S{6,})\S*$/
        if (this.form.password.length === 0) {
          return {
            type: false,
            msg: '请输入密码'
          }
        } else if (!regExp1.test(this.form.password)) {
          return {
            type: false,
            msg: '密码格式不正确'
          }
        } else {
          return {
            type: true
          }
        }
      }
    },
    async loginOrSign () {
      // 自定义表单校验
      const valid = this.testForm()
      if (valid.type) {
        if (this.isLogin) {
          // 登录
          const res = await login({
            email: this.form.email,
            password: this.form.password
          })
          console.log(res)
        } else {
          // 注册
          const res = await signup(this.form)
          console.log(res)
        }
      } else {
        this.title = valid.msg
        this.isWarning = true
        this.isShow = true
        return false
      }
    },
    resetForm () {
      this.$refs.form.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 440px;
  margin: 150px auto 0;
  border: 1px solid #ccc;
  padding:0 30px;
  box-sizing:border-box;
}
/deep/.el-form-item__content {
  margin-left: 0 !important;
}
/deep/.el-form.demo-form {
  margin-top: 20px!important;
  width:100%;
}
/deep/.el-form-item.is-error .el-input__inner{
  border-color:#ccc!important;
}
</style>
